<!-- src/cmps/base/image/JsImage.vue -->
<template>
  <el-image
    :src="src"
    :alt="alt"
    :fit="fit"
    :lazy="lazy"
    :scroll-container="scrollContainer"
  >
    <template #placeholder>
      <div class="image-slot">加载中<span class="dot">...</span></div>
    </template>
    <template #error>
      <div class="image-slot">加载失败</div>
    </template>
  </el-image>
</template>

<script setup lang="ts">
defineProps<{
  src: string
  alt?: string
  fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
  lazy?: boolean
  scrollContainer?: string | HTMLElement
}>()
</script>

<style scoped>
.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: #f5f7fa;
  color: #999;
}
</style>